<@script src="${url.context}/res/jquery/jquery.ui.datepicker-lt.js" />
<div class="form-field">
<#if form.mode == "view">
    <div class="viewmode-field">
        <#if field.mandatory && !(field.value?is_number) && field.value == "">
        <span class="incomplete-warning"><img src="${url.context}/res/components/form/images/warning-16.png" title="${msg("form.field.incomplete")}" /><span>
        </#if>
        <span class="viewmode-label">${field.label?html}:</span>
        <#if field.control.params.activateLinks?? && field.control.params.activateLinks == "true">
            <#assign fieldValue=field.value?html?replace("((http|ftp|https):\\/\\/[\\w\\-_]+(\\.[\\w\\-_]+)+([\\w\\-\\.,@?\\^=%&:\\/~\\+#]*[\\w\\-\\@?\\^=%&\\/~\\+#])?)", "<a href=\"$1\" target=\"_blank\">$1</a>", "r")>
        <#else>
            <#if field.value?is_number>
                <#assign fieldValue=field.value?c>
            <#else>
                <#assign fieldValue=field.value?html>
            </#if>
        </#if>
        <span class="viewmode-value"><#if fieldValue == "">${msg("form.control.novalue")}<#else>${fieldValue}</#if></span>
    </div>
<#else>
    <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
    <input id="${fieldHtmlId}" name="${field.name}" class="date-entry" tabindex="0"
           <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if>
           <#if field.control.params.style??>style="${field.control.params.style}"</#if>
           <#if field.description??>title="${field.description}"</#if>
           <#if field.control.params.maxLength??>maxlength="${field.control.params.maxLength}"</#if>
           <#if field.control.params.size??>size="${field.control.params.size}"</#if>
           <#if field.disabled && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true")>disabled="true"</#if> />
<script type="text/javascript">//<![CDATA[
    var theDate = null, currentValue = null, fieldId = null, fieldHtmlId = null, selected = null;

    currentValue = "${field.value?js_string}";
    fieldId 	= "${fieldHtmlId}";
    fieldHtmlId = '#'+fieldId;
    if (currentValue != null && currentValue != "") {
        theDate = Alfresco.util.fromISO8601(currentValue);
        selected = theDate.getFullYear() + "-" + (theDate.getMonth() +1) + "-" + theDate.getDate();
        //console.log(fieldHtmlId);
        //console.log("CurrentValue: " + currentValue);
        //console.log("SELECTED DATE: " + selected);
        $(fieldHtmlId).datepicker({
            numberOfMonths: 1,
            showOn: "button",
            buttonImage: "../jquery/images/calendar.gif",
            buttonImageOnly: true,
            minDate:"0d",
            maxDate: "+3M",
            dateFormat:"yy-mm-dd"
        });
        document.getElementById(fieldId).value = selected;
    } else {
        $(fieldHtmlId).datepicker({
            numberOfMonths: 1,
            showOn: "button",
            buttonImage: "../jquery/images/calendar.gif",
            buttonImageOnly: true,
            minDate:"0d",
            maxDate: "+3M",
            dateFormat:"yy-mm-dd"
        });
    }
    $(fieldHtmlId).datepicker($.datepicker.regional["lt"]);
//]]></script>
</#if>
</div>